<template>
  <el-dialog :title="title" v-model.visible="dialogVisible" append-to-body
    :width="(viewType === 'workflowLog' || viewType === 'runLog') ? '800px' : '96vw'" top="22px" class="contextMenuDialog"
    :close-on-click-modal="false" :close-on-press-escape="false" @close="dialogClose" @closed="dialogClose">
    <workflow-log v-if="viewType === 'workflowLog'" ref="workflowLog" />
    <operator-log v-if="viewType === 'runLog'" ref="operatorLog" :id-config="idConfig" />
    <operation-result v-if="viewType === 'runResult'" ref="operationResult" :id-config="idConfig" />
    <file-explorer-group v-if="explorerState" ref="fileExplorerGroup" :id-config="idConfig" :storages="storages" />
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, computed, onMounted, nextTick, watch } from "vue"
import { designerStore } from 'src/stores/designerTool/designerTool'
import WorkflowLog from './workflowLog.vue'
import OperatorLog from './operatorLog.vue'
import OperationResult from './operationResult.vue'
import FileExplorerGroup from './fileExplorerGroup.vue'
const store = designerStore()
const props = defineProps({
  idConfig: {
    type: Object
  },
  storages: {
    type: Array
  }
})
const dialogVisible = ref(false)
const title = ref('')
const viewType = ref('')
const workflowLog=ref(null)
const operatorLog=ref(null)
const operationResult=ref(null)
const fileExplorerGroup=ref(null)
const explorerState = computed(() => {
  return props.storages && props.storages.length ? (viewType.value === props.storages[0].key ||
    viewType.value === props.storages[1].key ||
    viewType.value === props.storages[2].key) : false
})
 function init(viewType:any) {
      let label = ''
      const nodeInfo = store.categoriesSubset[props.idConfig.operator_id]
      if (nodeInfo) {
        label = nodeInfo.label + '-'
      }
      viewType.value = viewType
      dialogVisible.value = true
      nextTick(() => {
        switch (viewType) {
          case 'workflowLog':
            title.value = '工作流日志'
            workflowLog.value.init()
            break
          case 'runLog':
            title.value = label + '日志'
            operatorLog.value.init()
            break
          case 'runResult':
            title.value = label + '运行结果'
            operationResult.value.init()
            break
          default:
            if (explorerState.value) {
              title.value = label + '文件'
              nextTick(() => {
                fileExplorerGroup.value.init(viewType)
              })
            }
        }
      })
    }
    const emits=defineEmits(['emitChange'])
    function dialogClose() {
      emits('emitChange', false)
    }
    defineExpose({init})
</script>

<style lang="scss" scoped>
.contextMenuDialog {
  ::v-deep.el-dialog__body {
    height: calc(100vh - 98px);
    overflow: auto;
    padding: 0 20px 10px;
  }
}
</style>
